import { Component, OnInit, Injector, ViewChild, ElementRef } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { loadModules } from 'esri-loader';
import esri = __esri;
import {AppConsts} from "@shared/AppConsts";

@Component({
  selector: 'app-security-zone-modal',
  templateUrl: './security-zone-modal.component.html',
  styleUrls: ['./security-zone-modal.component.less']
})
export class SecurityZoneModalComponent extends AppComponentBase implements OnInit {

  @ViewChild('mapViewNode') private mapViewEl: ElementRef;
  isVisible: boolean = false;
  lng: number;
  lat: number;
  radius: number;

  constructor(injector: Injector) {
    super(injector);
  }

  ngOnInit() {
  }

  async initializeMap() {
    try {
      const [Map, MapView, ScaleBar, TileLayer, Graphic, Circle] = await loadModules([
        'esri/Map',
        'esri/views/MapView',
        'esri/widgets/ScaleBar',
        'esri/layers/TileLayer',
        'esri/Graphic',
        'esri/geometry/Circle',
        'dojo/domReady!'
      ], {
        url: AppConsts.arcgisMapUrl,         css: AppConsts.arcgisStyleUrl
      });

      // Set type of map
      const mapProperties: esri.MapProperties = {
        // basemap: this._basemap,
        layers: new TileLayer({
          url: AppConsts.arcgisMapServerUrl
        })
      };

      const map: esri.Map = new Map(mapProperties);

      // Set type of map view
      const mapViewProperties: esri.MapViewProperties = {
        container: this.mapViewEl.nativeElement,
        center: this._center,
        zoom: this._zoom,
        map: map
      };

      const mapView: esri.MapView = new MapView(mapViewProperties);

      const parentThis = this;
      // All resources in the MapView and the map have loaded.
      // Now execute additional processes
      mapView.when(() => {
        const scaleBar = new ScaleBar({
          view: mapView,
          unit: "dual" // The scale bar displays both metric and non-metric units.
        });
        mapView.ui.add(scaleBar, "bottom-left");

        createArea();

        function createArea() {
          // const jsonStr: string = '{"geometry":{"spatialReference":{"wkid":4326},"rings":[[[15.564983111749909,-12.848],[15.564933901323824,-12.84893899086658],[15.564786809205298,-12.84986769395273],[15.56454344696636,-12.850775934193091],[15.564206480934626,-12.851653760717534],[15.563779602980455,-12.852491555874956],[15.563267490068046,-12.853280140606293],[15.56267575301363,-12.854010875012207],[15.562010875012206,-12.854675753013632],[15.561280140606291,-12.855267490068048],[15.560491555874954,-12.855779602980457],[15.559653760717532,-12.856206480934627],[15.55877593419309,-12.856543446966361],[15.557867693952728,-12.8567868092053],[15.556938990866579,-12.856933901323826],[15.556,-12.85698311174991],[15.55506100913342,-12.856933901323826],[15.55413230604727,-12.8567868092053],[15.553224065806909,-12.856543446966361],[15.552346239282466,-12.856206480934627],[15.551508444125044,-12.855779602980457],[15.550719859393707,-12.855267490068048],[15.549989124987793,-12.854675753013632],[15.549324246986368,-12.854010875012207],[15.548732509931952,-12.853280140606293],[15.548220397019543,-12.852491555874956],[15.547793519065372,-12.851653760717534],[15.547456553033639,-12.850775934193091],[15.5472131907947,-12.84986769395273],[15.547066098676174,-12.84893899086658],[15.54701688825009,-12.848],[15.547066098676174,-12.847061009133421],[15.5472131907947,-12.846132306047272],[15.547456553033639,-12.845224065806908],[15.547793519065372,-12.844346239282467],[15.548220397019543,-12.843508444125046],[15.548732509931952,-12.842719859393709],[15.549324246986368,-12.841989124987794],[15.549989124987793,-12.84132424698637],[15.550719859393707,-12.840732509931954],[15.551508444125044,-12.840220397019545],[15.552346239282466,-12.839793519065374],[15.553224065806909,-12.83945655303364],[15.55413230604727,-12.839213190794702],[15.55506100913342,-12.839066098676176],[15.556,-12.839016888250091],[15.556938990866579,-12.839066098676176],[15.557867693952728,-12.839213190794702],[15.55877593419309,-12.83945655303364],[15.559653760717532,-12.839793519065374],[15.560491555874954,-12.840220397019545],[15.561280140606291,-12.840732509931954],[15.562010875012206,-12.84132424698637],[15.56267575301363,-12.841989124987794],[15.563267490068046,-12.842719859393709],[15.563779602980455,-12.843508444125046],[15.564206480934626,-12.844346239282467],[15.56454344696636,-12.845224065806908],[15.564786809205298,-12.846132306047272],[15.564933901323824,-12.847061009133421],[15.564983111749909,-12.848],[15.564983111749909,-12.848]]]},"symbol":{"type":"esriSFS","color":[138,43,226,204],"outline":{"type":"esriSLS","color":[255,255,255,255],"width":0.5,"style":"esriSLSSolid"},"style":"esriSFSSolid"},"attributes":{},"popupTemplate":null}'
          // const transJson = Graphic.fromJSON(JSON.parse(jsonStr));
          // mapView.graphics.add(transJson);
          //
          const circle = new Circle({
            center: parentThis._center,
            radius: parentThis.radius
          });
          const graphic = new Graphic({
            geometry: circle,
            symbol: {
              type: "simple-fill",
              outline: {
                color: [255, 0, 0],
                width: 2
              }
            }
          });
          mapView.graphics.add(graphic);
        }

      });
    } catch (error) {
      console.log('We have an error: ' + error);
    }

  }

  show(lng: number, lat: number, radius: number): void {
    this.isVisible = true;
    this.lat = lat;
    this.lng = lng;
    this.radius = radius;
    this._center = [lng, lat];

    this.initializeMap();
  }

  close() {
    this.isVisible = false;
  }
}
